<template>
  <el-main>
    <div style="text-align: left">
      <span>教室管理系统</span>
      <br />
      <el-input placeholder="教室编号" v-model="input1" style="width:200px;margin-right:20px"></el-input>
      <el-input placeholder="教室姓名" v-model="input2" style="width:200px;margin-right:20px"></el-input>
      <!-- <el-input placeholder="楼层" v-model="input3" style="width:200px;margin-right:20px"></el-input>
      <el-input placeholder="学生部门" v-model="input4" style="width:200px;margin-right:20px"></el-input>
      <el-input placeholder="学生姓名" v-model="input5" style="width:200px;margin-right:20px"></el-input> -->


      <!--登陆-->
      <el-button type="info" icon="el-icon-search" @click="select()">查询</el-button>
      <!--登陆-->
      <el-button type="success" icon="el-icon-edit" @click="dialogVisible = true">添加</el-button>

        <!--添加模态框-->
      <el-dialog title="新增教室" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
        <span>新增教室信息</span>
        <br />
        <div class="addinput">
          <el-input placeholder="区域" v-model="addarea" style="width: 300px"></el-input>
          <el-input placeholder="楼号" v-model="addbuildingNo" style="width: 300px"></el-input>
          <el-input placeholder="楼层" v-model="addfloor" style="width: 300px"></el-input>
          <el-input placeholder="教室编号" v-model="addclassroomNumber" style="width: 300px"></el-input>
          <el-input placeholder="教室名称" v-model="addclassroomName" style="width: 300px"></el-input>
          <el-input placeholder="容纳人数" v-model="addgalleryful" style="width: 300px"></el-input>
          <el-select v-model="addusestatus" placeholder="请选择使用状态">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="add(), (dialogVisible = false)">确 定</el-button>
        </span>
      </el-dialog>

      <!--修改模态框-->
      <el-dialog title="修改教室" :visible.sync="updatadialogVisible" width="30%" :before-close="handleClose">
        <span>修改教室信息</span>
        <br />
        <div class="addinput">
          <el-input placeholder="区域" v-model="uparea" style="width: 300px"></el-input>
          <el-input placeholder="楼号" v-model="upbuildingNo" style="width: 300px"></el-input>
          <el-input placeholder="楼层" v-model="upfloor" style="width: 300px"></el-input>
          <el-input placeholder="教室编号" v-model="upclassroomNumber" style="width: 300px"></el-input>
          <el-input placeholder="教室名称" v-model="upclassroomName" style="width: 300px"></el-input>
          <el-input placeholder="容纳人数" v-model="upgalleryful" style="width: 300px"></el-input>
          <el-input placeholder="upclassroomId" v-model="upclassroomId" style="width: 300px" v-show="false"></el-input>
          <el-input placeholder="uppkId" v-model="uppkId" style="width: 300px"></el-input>
        </div>
        <span slot="footer" class="dialog-footer">
          

          
          <el-button @click="updatadialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="update(), (updatadialogVisible = false)">确 定</el-button>
          
        </span>
      </el-dialog>

    </div>
    <router-view></router-view>

    <el-table :data="tableData">
      <el-table-column prop="area" label="区域" width="140">
      </el-table-column>
      <el-table-column prop="buildingNo" label="楼号" width="120">
      </el-table-column>
      <el-table-column prop="buildingFloor" label="楼层" width="140">
      </el-table-column>
      <el-table-column prop="classroomNumber" label="教室编号" width="140">
      </el-table-column>
      <el-table-column prop="classroomName" label="教室名称" width="140">
      </el-table-column>
      <el-table-column prop="galleryful" label="容纳人数" width="140">
      </el-table-column>


      <el-table-column prop="address"> </el-table-column>
      <el-table-column prop="cz" label="修改" width="140">
        <template slot-scope="scope">
          <el-button type="warning" @click="findByClassroomId(scope.row.classroomId),updatadialogVisible = true">修改</el-button>
        </template>
        
      </el-table-column>
      <el-table-column prop="cz" label="删除" width="140">
        <template slot-scope="scope">
        <el-button type="danger" @click="del(scope.row.pkId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-main>
</template>

<script>
export default {
  name: "Classroom",

  created: function () {
    this.select();
  },

  data() {
    //下拉框选择器
    return {
      //分页
      pageNum: 1, //默认当前页数
      pageSize: 5, //默认每页显示条数
      total: 0, //总数据条数
      
      options: [{
          value: '0',
          label: '0-正常'
        },{
          value: '1',
          label: '1-删除'
        }],
        value: '',

      addarea: '',
      addbuildingNo: '',
      addfloor: '',
      addclassroomNumber: '',
      addclassroomName: '',
      addgalleryful: '',
      addusestatus: '',

      input1: '',
      input2: '',
      input3: '',
      input4: '',
      input5: '',
      tableData: [],



      dialogVisible: false,

      uparea: '',
      upbuildingNo: '',
      upfloor: '',
      upclassroomNumber: '',
      upclassroomName: '',
      upgalleryful: '',
      upclassroomId : '',
      uppkId : '',
      updatadialogVisible: false,

    };
  },
  props: {},
  methods: {
    //模态框
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => { });
    },
    select: function () {
      var that = this;
      this.$axios.post("/classroom/queryData", {
        classroomNumber: that.input1,
        classroomName: that.input2,

      })
        .then(function (response) {
          console.log(response);
          that.tableData = response.data.data;
        })
        .catch(function (error) {

        });
    },
    add: function () {
      var that = this;
      this.$axios.post("/classroom/saveData", {
        area: that.addarea,
        buildingNo: that.addbuildingNo,
        floor: that.addfloor,
        classroomNumber: that.addclassroomNumber,
        classroomName: that.addclassroomName,
        galleryful: that.addgalleryful,
        usestatus: that.addusestatus,
      })
        .then(function (response) {
          that.select();
        })
    },
    del: function(pkId){
      var that = this;
      this.$axios.post("/classroom/deleteData",{
        pkId : pkId ,
      })
      .then(function (response){
        that.select();
        alert("删除成功");
      })
    },
    findByClassroomId : function(classroomId){
      var that = this;
      this.$axios.post("/classroom/findByClassroomId",{
        classroomId : classroomId,
      })
      .then(function(response){
        that.uparea = response.data.data.area;
        that.upbuildingNo = response.data.data.buildingNo;
        that.upfloor = response.data.data.buildingFloor;
        that.upclassroomNumber = response.data.data.classroomNumber;
        that.upclassroomName = response.data.data.classroomName;
        that.upgalleryful = response.data.data.galleryful;
        that.upclassroomId = response.data.data.classroomId;
        that.uppkId = response.data.data.pkId;
      })
    },
    update : function(){
      var that = this;
      this.$axios.post("/classroom/editData",{
        pkId : that.uppkId,
        area: that.uparea,
        buildingNo: that.upbuildingNo,
        floor: that.upfloor,
        classroomNumber: that.upclassroomNumber,
        classroomName: that.upclassroomName,
        galleryful: that.upgalleryful,
      })
      .then(function(response){
        that.select();
        
      })
    }
  },
};
</script>

<style>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>